<template>
    <div class="dispatch-box dispatch-map" >
        <div class="full">
            <dispatch-map
                    ref="map"
                    @openInfoDialog="openInfoDialog"
                    @getPointOrLine="listMapCheck"
                    @checkDriver="checkDriver"
                    v-model="dispatchObj">
            </dispatch-map>
            <dispatch-driver
                    ref="driver"
                    v-loading="driverLoading"
                    element-loading-text="司机列表加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(255, 255, 255, 0.8)"
                    v-model="dispatchObj['driverData']"
                    @openDispatchDialog="openDispatchDialog"
                    @refresh="refreshDriver"
                    @checkDriver="checkDriver">
            </dispatch-driver>
            <dispatch-way-bill
                    ref="list"
                    v-loading="loading"
                    element-loading-text="订单列表加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(255, 255, 255, 0.8)"
                    v-model="dispatchObj['orderData']"
                    @checkItem="listMapCheck"
                    @openOrderDialog="openOrderDialog"
                    @refresh="refreshOrder">
            </dispatch-way-bill>
        </div>
    </div>
</template>

<script>
    import DispatchMap from '../express/dispatch/mapFirst/DispatchMap.vue'
    // import DispatchMap from '../express/dispatch/mapFirst/DispatchMapCopy.vue'
    import DispatchDriver from '../express/dispatch/mapFirst/DispatchDriver.vue'
    import DispatchWayBill from '../express/dispatch/mapFirst/DispatchWaybill.vue'
    import {mapMixins} from '../express/dispatch/mapFirst/minxins'
    import Vue from 'vue';
    export default {
        mixins: [mapMixins],
        data() {
            return {
                dispatchObj: {
                    driverData: {
                        isShowNowOrALLTask: '2',  // 显示当前或者全部任务或者司机轨迹
                        cascaderOption: [{value:'kong',label:'全部'}],  // 连队车队司机列表
                        driverFeet: null, // 选中的连队
                        driverList: [],  // 签到司机列表
                        driverTask: [],  // 签到司机对应任务列表
                        driverNowTask: [],  // 签到所有司机对应当前任务列表
                        driverNowTaskSingle: [],  // 签到单个司机对应当前任务列表
                        taskNowEndLngLat: [],  // 签到所有司机对应当前任务列表
                        taskNowEndLngLatSingle: [],  // 签到单个司机对应当前任务列表
                        taskEndLngLat: [],  // 对应司机所有任务终点集合
                        // flagTaskPoly: [],  // 对应司机所有任务终点连线集合
                        flagTaskPoly: {},  // 对应司机所有任务终点连线集合（折线）
                        driverLonLat: [],  // 签到司机点击的经纬度
                        driverWuRenWuOrder: [],  // 无任务订单列表
                        driverNameTask: '',  // 签到司机对应任务列表显示名字
                        driverIdTask: '',  // 签到司机对应任务列表显示driverId
                        showTask: false,  // 显示司机对应任务
                        searchDriverStr: '',  // 司机搜索
                        size: 1  // 司机搜索

                    },
                    orderData: {
                        isShowOrder: false,  // 展开列表
                        orderForMap: [],  // 订单列表
                        markers: [],  // 合并后的包裹列表
                        orderNav: [],  // 导航列表
                        searchInput: '',  // 搜索参数
                        wayBillType: '',  // 导航选中
                        orderChecked: '',  // 订单选中列表
                        redrectBag: [], // 框选范围内的bag数据
                        redrectLngLat: []  // 框选对角经纬度
                    },
                    spotData: {
                        spotList: [],  // 接驳点列表
                    },
                    areaData: {
                        areaList: []  // 区域列表
                    }
                }, // 可视化调度参数对象
                orderPageInfo: {
                    api: 'express/order',
                    pageSize: 100,
                    page: 1
                },  // 运单接口
                // checkDriverLngLat: [],  // check时
                // checkDriverIndex: null,  // check时
                // setIsOpen: true,  // check时
                spotApi: 'express/spot?pageSize=200&size=1',
                areaApi: 'express/area?status=1&pageSize=200',
                navApi: 'express/order/nav',
                times: null,   // 搜索定时器
                dialogVisible: false,   // 窗体显示隐藏
                isOpenOrderList: false,  // 是否展开订单列表
                loading: false,  // 全局loading
                driverLoading: false,  // 司机loading
                dialogType: '',  // 信息窗体类型（接驳点，司机，区域等）
                dialogWidth: '30%',   // 全局loading
                dialogInfo: null,   // 窗体显示信息（接驳点，司机，区域等）
                timer: null,   // 定时器
                checkedDriverId: null   // 点击是临时保存的driverid
            }
        },
        computed: {
            redrectLngLat: function (val) {
                return this.dispatchObj.orderData.redrectLngLat;
            },
            isShowNowOrALLTask: function (val) {
                return this.dispatchObj.driverData.isShowNowOrALLTask;
            },
            isShowOrder: function(val) {
                return this.dispatchObj.orderData.isShowOrder;
            },
            navIndex: function (val) {
                return this.dispatchObj.orderData.wayBillType;
            },
            searchOrder: function (val) {
                return this.dispatchObj.orderData.searchInput;
            },
            searchDriver: function (val) {
                return this.dispatchObj.driverData.searchDriverStr;
            },
            dataRefreshDialog() {  // 实时感知store数据变化
                return this.$store.state.num;
            },
            driverFeet() {  // 连队变化
                return this.dispatchObj.driverData.driverFeet;
            },
        },
        watch: {
            isShowNowOrALLTask: function(val) {
                this.dispatchObj.driverData.driverList.forEach(item=>{
                    if (item.id == this.checkedDriverId) {
                        Vue.set(item, 'checked', false);
                    }
                });
                if (val == '1') {
                    this.dispatchObj.driverData.showTask = false;
                    this.dispatchObj.driverData.taskEndLngLat = [];
                    this.dispatchObj.driverData.flagTaskPoly = [];
                } else if (val == '2') {
                    this.dispatchObj.driverData.taskNowEndLngLatSingle = [];
                    this.dispatchObj.driverData.driverNowTaskSingle = [];
                } else if (val == '3') {
                    this.dispatchObj.driverData.showTask = false;
                    this.dispatchObj.driverData.taskEndLngLat = [];
                    this.dispatchObj.driverData.flagTaskPoly = [];
                    this.dispatchObj.driverData.taskNowEndLngLatSingle = [];
                    this.dispatchObj.driverData.driverNowTaskSingle = [];
                }
            },
            isShowOrder:function(val) {
                let mapwrap = document.getElementsByClassName('amap-maptype-wrap')[0];
                let mapwraptitle = document.getElementsByClassName('amap-maptype-list')[0];
                let control = document.getElementById('controlList');
                let turectangle = document.getElementById('turectangle');
                if (val) {
                    control.style.right = '230px';
                    mapwrap.style.right = '266px';
                    mapwraptitle.style.right = '266px';
                    turectangle.style.right = '336px';
                    this.dispatchObj.orderData.wayBillType =  this.dispatchObj.orderData.orderNav[0].type;
                    this.getOrderForMap();

                } else {
                    control.style.right = '0px';
                    mapwrap.style.right = '50px';
                    mapwraptitle.style.right = '50px';
                    turectangle.style.right = '130px';
                    this.dispatchObj.orderData.orderForMap = [];
                    this.dispatchObj.orderData.markers = [];
                }
            },
            redrectLngLat: function (val) {
                this.getOrderForMap('rec');
            },
            navIndex: function (val) {
                this.getOrderForMap();
            },
            driverFeet: function (val) {
                this.getDriveForMap();
            },
            searchOrder: function (val) {
                clearInterval(this.times);
                this.times = setTimeout(() => {
                    this.getOrderForMap();
                },500)
            },
            searchDriver: function (val) {
                clearInterval(this.times);
                this.times = setTimeout(() => {
                    this.getDriveForMap();
                },500)
            },
            dataRefreshDialog: function (val) {  // store数据变化立马重新请求
                // this.mapInit();
                this.getSite();
                this.getArea();
                this.getOrderNav();
                this.getOrderForMap();
                this.getDriveTask({driverId:this.dispatchObj.driverData.driverIdTask,driverLngLat:this.dispatchObj.driverData.driverLonLat});
            }
        },
        mounted() {
            this.mapInit();
        },
        beforeDestroy() {
            clearInterval(this.timer);
            this.timer = null;
        },
        methods: {
            mapInit() {
                this.getDriverTreeData();
                this.getSite();
                this.getArea();
                this.getOrderNav();
                this.driverLoading = true;
                this.getDriveForMap();
                this.timer = setInterval(()=>{
                    this.getDriveForMap();
                },40000);
            }, // 初始化地图
            refreshOrder() {
                this.getOrderForMap();
            }, // 刷新右边运单
            refreshDriver() {
                this.driverLoading = true;
                this.dispatchObj.driverData.showTask = false;
                this.dispatchObj.driverData.taskEndLngLat = [];
                this.dispatchObj.driverData.flagTaskPoly = [];
                this.dispatchObj.driverData.driverList = [];
                this.getDriveForMap();
            }, // 刷新左边司机列表
            getDriverTreeData() {
                this.$http.get( 'user/driver/tree')
                    .then((response) => {
                        response.data.data.forEach((item1) => {
                            this.dispatchObj.driverData.cascaderOption.push(item1);
                        });
                    })
                    .catch((error) => {
                        if (error.response.data.msg) {
                            this.$message.error(error.response.data.msg);
                        } else {
                            this.$message.error('请求错误：' + error.response.status);
                        }
                    });
            }, // 获取连队tree
            openDispatchDialog(driverId) {   // 指派
                if (this.checkedList.length === 0) {
                    this.$message.warning("请选择运单后指派");
                } else {
                    let checks = this.checkedList.join(",");
                    this.$router.push({path: '/dialog/assign/express.order/' + checks + '/' + driverId});
                }
            },
            openOrderDialog(orderId) {
                this.$router.push({path: '/dialog/show/express.order/' + orderId});
            }, // 查看运单详情
            checkDriver(val) {
                this.checkedDriverId = val.driverId;
                if (this.dispatchObj.driverData.isShowNowOrALLTask == '2') {
                    for (let i = 0, length = this.dispatchObj.driverData.driverList.length; i < length; i++) {
                        if (this.dispatchObj.driverData.driverList[i]['id'] === val.driverId) {
                            if (!val.isOpen) {
                                this.dispatchObj.driverData.taskEndLngLat = [];
                                this.dispatchObj.driverData.flagTaskPoly = [];
                                this.dispatchObj.driverData.showTask = false;
                                Vue.set(this.dispatchObj.driverData.driverList[i], 'checked', false);
                            } else {
                                if (!this.dispatchObj.driverData.driverList[i]['checked']) {
                                    Vue.set(this.dispatchObj.driverData.driverList[i], 'checked', true);
                                    this.dispatchObj.driverData.showTask = true;
                                    this.dispatchObj.driverData.driverNameTask = val.driverName;
                                    this.dispatchObj.driverData.driverIdTask = val.driverId;
                                    this.getDriveTask(val);
                                    this.getWuRenWuOrder(val);
                                } else {
                                    Vue.set(this.dispatchObj.driverData.driverList[i], 'checked', false);
                                    this.dispatchObj.driverData.taskEndLngLat = [];
                                    this.dispatchObj.driverData.flagTaskPoly = [];
                                    this.dispatchObj.driverData.showTask = false;
                                }
                            }
                        } else {
                            Vue.set(this.dispatchObj.driverData.driverList[i], 'checked', false);
                        }
                    }
                } else if (this.dispatchObj.driverData.isShowNowOrALLTask == '1') {
                    this.dispatchObj.driverData.taskNowEndLngLatSingle = [];
                    this.dispatchObj.driverData.driverNowTaskSingle = [];
                    for (let i = 0, length = this.dispatchObj.driverData.driverList.length; i < length; i++) {
                        if (this.dispatchObj.driverData.driverList[i]['id'] === val.driverId) {
                            if (!val.isOpen) {
                                this.dispatchObj.driverData.taskNowEndLngLatSingle = [];
                                this.dispatchObj.driverData.driverNowTaskSingle = [];
                                Vue.set(this.dispatchObj.driverData.driverList[i], 'checked', false);
                            } else {
                                if (!this.dispatchObj.driverData.driverList[i]['checked']) {
                                    Vue.set(this.dispatchObj.driverData.driverList[i], 'checked', true);
                                    this.dispatchObj.driverData.taskNowEndLngLat.forEach(item=>{
                                        if (val.driverId == item.id) {
                                            this.dispatchObj.driverData.taskNowEndLngLatSingle.push(item);
                                        }
                                    });
                                    if (this.dispatchObj.driverData.taskNowEndLngLatSingle.length == 0) {
                                        this.$message.error({
                                            message: '此司机无当前任务！',
                                            duration: 1000
                                        });
                                    } else {
                                        this.$refs.map.center = this.dispatchObj.driverData.taskNowEndLngLatSingle[0].path;
                                        this.$refs.map.zoom = 13;
                                    }

                                    this.dispatchObj.driverData.driverNowTask.forEach(item=>{
                                        if (val.driverId == item.id) {
                                            this.dispatchObj.driverData.driverNowTaskSingle.push(item);
                                        }
                                    });
                                } else {
                                    Vue.set(this.dispatchObj.driverData.driverList[i], 'checked', false);
                                    this.dispatchObj.driverData.taskNowEndLngLatSingle = [];
                                    this.dispatchObj.driverData.driverNowTaskSingle = [];
                                }
                            }
                        } else {
                            Vue.set(this.dispatchObj.driverData.driverList[i], 'checked', false);
                        }
                    }

                } else if (this.dispatchObj.driverData.isShowNowOrALLTask == '3') {
                    this.$router.push({path:'/dialog/line/user.driver/' + val.driverId});
                }
            },  // 选中司机
            setControlLngLat(start,end) {
                let controlLngLat = [];
                controlLngLat = [(Number(start[0]) + Number(end[0]))/2 + this.num, (Number(start[1]) + Number(end[1]))/2 + this.num];
                    this.num += 0.02;
                return controlLngLat;
            },
            getWuRenWuOrder(val) {
                this.$http.get('express/order?pageSize=200&dispatchList=1&dispatch_status$=<1&status$=>0,<99&driver_id$=' + val.driverId)
                    .then((response) => {
                        this.dispatchObj.driverData.driverWuRenWuOrder = response.data.data;
                    })
                    .catch((error) => {
                        this.$message.error('请求数据错误');
                    });
            }, // 获取站点信息
            getDriveTask(val) {
                this.num = null;
                let point = [];
                this.$http.get('express/mission?mission_status=uncompleted&pageSize=200&driver_id=' + val.driverId)
                    .then((res) => {
                        this.dispatchObj.driverData.taskEndLngLat = [];
                        this.dispatchObj.driverData.flagTaskPoly = [];
                        this.dispatchObj.driverData.driverTask = res.data.data;
                        if (this.dispatchObj.driverData.driverTask && this.dispatchObj.driverData.driverTask.length > 0) {
                            point.push(val.driverLngLat);
                            this.dispatchObj.driverData.driverTask.forEach(item => {
                                // let line = [];
                                // point.push({
                                //     end_lon: item.end_lon,
                                //     end_lat: item.end_lat
                                // });
                                // if (point && point.length > 0) {
                                //     for (let index in point) {
                                //         //贝塞尔曲线显示方式
                                //         if (point[index]['end_lon'] == item.end_lon && point[index]['end_lat'] == item.end_lat) {
                                //             // console.info('相同',[item.end_lon, item.end_lat]);
                                //             line = [val.driverLngLat, [this.setControlLngLat(val.driverLngLat,[item.end_lon, item.end_lat]), [item.end_lon, item.end_lat]]];
                                //         } else {
                                //             // console.info('不相同',[item.end_lon, item.end_lat]);
                                //             line = [val.driverLngLat, [item.end_lon, item.end_lat]];
                                //         }
                                //     }
                                // }
                                //
                                // let lines = [];
                                // lines.push({
                                //     path: line,
                                //     strokeWeight: 2,
                                //     strokeColor: 'rgba(64,158,255,0.8)',
                                //     strokeStyle: 'solid'
                                // });
                                if (item.kind !== 2) {
                                    point.push([item.end_lon, item.end_lat]);
                                    this.dispatchObj.driverData.taskEndLngLat.push({
                                        position: [item.end_lon, item.end_lat],
                                        rec_order: item.related_pick_orders_count,
                                        send_order: item.related_send_orders_count
                                    });
                                }
                               // 单个司机对应任务终点集合
                            });
                            this.dispatchObj.driverData.flagTaskPoly['path'] = point;
                        }
                    })
                    .catch((error) => {
                        if (error.response.data.msg) {
                            this.$message.error(error.response.data.msg);
                        } else {
                            this.$message.error('请求错误：' + error.response.status);
                        }
                    });

            }, // 选中司机对应的任务
            getSite() {
                this.$http.get(this.spotApi)
                    .then((response) => {
                        this.dispatchObj.spotData.spotList = response.data.data;
                    })
                    .catch((error) => {
                        this.$message.error('请求数据错误');
                    });
            }, // 获取站点信息
            getArea() {
                this.$http.get(this.areaApi)
                    .then((response) => {
                        this.dispatchObj.areaData.areaList = response.data.data;
                    })
                    .catch((error) => {
                        this.$message.error('请求数据错误');
                    });
            }, // 获取区域信息
            getOrderNav() {
                this.$http.get(this.navApi).then(res => {
                    this.dispatchObj.orderData.orderNav = res.data.data;
                }).catch(error => {
                    if (error.response.data.msg) {
                        this.$message.error(error.response.data.msg);
                    } else {
                        this.$message.error('请求错误：' + error.response.status);
                    }
                });
            },// 获取订单导航信息
            getOrderForMap(val) {
                this.loading = true;
                let query = {};
                if (val && val === 'rec') {  // 框选获取
                    query['location'] = JSON.stringify(this.dispatchObj.orderData.redrectLngLat);
                }
                query['pageSize'] = this.orderPageInfo.pageSize;
                query['page'] = this.orderPageInfo.page;
                query['dingdong'] = this.searchOrder;
                query['orderDispatchStatus'] = this.navIndex;
                this.$http.get(this.$larfree.httpQuery(query, this.orderPageInfo.api))
                    .then((res) => {
                        this.loading = false;
                        if (val && val === 'rec') {
                            this.dispatchObj.orderData.redrectBag = res.data.data;
                            for (let key in this.dispatchObj.orderData.redrectBag) {
                                this.listMapCheck(this.dispatchObj.orderData.redrectBag[key].id, false);
                            }
                        } else {
                            this.dispatchObj.orderData.orderForMap = res.data.data;
                            //初始点位
                            this.initPoints(true);
                        }
                    })
                    .catch((error) => {
                        console.log(error);
                        this.loading = false;
                        if (error.response.data.msg) {
                            this.$message.error(error.response.data.msg);
                        } else {
                            this.$message.error('请求错误：' + error.response.status);
                        }
                    });
            },
            getDriveForMap() {
                // this.driverLoading = true;
                let query = {};
                query['name'] = this.searchDriver;
                if (this.driverFeet == 'kong') {
                    query['team_id'] = '';
                } else {
                    query['team_id'] = this.driverFeet;
                }
                this.$http.get(this.$larfree.httpQuery(query, 'common/user/driver'))
                    .then((res) => {
                        this.driverLoading = false;
                        this.dispatchObj.driverData.driverList = [];
                        this.dispatchObj.driverData.taskNowEndLngLat = [];
                        this.dispatchObj.driverData.driverNowTask = [];
                        let nowTime = (new Date()).getTime();
                            res.data.data.forEach(item => {
                                let line = [];
                                item['nowTime'] = nowTime;
                                if (item.lon && item.lat) {
                                    this.dispatchObj.driverData.driverList.push(item);
                                } else {
                                    item.lon = '137.3730468750'; // 没有经纬度先默认
                                    item.lat = '25.9975499196';
                                    this.dispatchObj.driverData.driverList.push(item);
                                }
                                let lines = {};
                                if ( item.current_mission_destination !== null ) {
                                    line = [[item.lon,item.lat],[item.current_mission_destination.end_lon, item.current_mission_destination.end_lat]];
                                    this.dispatchObj.driverData.taskNowEndLngLat.push({
                                        id: item.id,
                                        path: [item.current_mission_destination.end_lon, item.current_mission_destination.end_lat],
                                        driverName: item.name,
                                        events: {
                                            click: () => {
                                                this.$router.push({path:'/dialog/show/express.mission/' + item.current_mission_destination.id})
                                            }
                                        }
                                    });
                                     lines = {
                                        id:item.id,
                                        path: line
                                    }

                                }
                                this.dispatchObj.driverData.driverNowTask.push(lines);
                            });

                    })
                    .catch((error) => {
                        this.driverLoading = false;
                        if (error.response.data.msg) {
                            this.$message.error(error.response.data.msg);
                        } else {
                            this.$message.error('请求错误：' + error.response.status);
                        }
                    });
            },
            openInfoDialog(value) {
                this.$router.push({path: '/dialog/show/express.spot/' + value.id});
            }
        },
        components: {
            DispatchMap,
            DispatchDriver,
            DispatchWayBill
        }
    }
</script>
<style>
    .amap-maptype-wrap{
        right: 50px;
        transition: 0.5s all linear;
    }
    .amap-maptype-list{
        right: 50px;
        transition: 0.5s all linear;
    }
</style>
<style lang="less">
    .dispatch-box {
        width: 100%;
        top:96px;
        bottom: 0;
        position: absolute;
        overflow: hidden;
        .search-div i:hover,.list-fresh:hover{
            cursor: pointer;
            color: #666;
        }
        .full {
            height: 100%;
            .open-order-list{
                position: absolute;
                top: 0px;
                right: 240px;
                .open-order-list-button{
                    font-size: 20px;
                }
                .el-button{
                    border-radius: 0px;
                    height: 56px;
                }
            }
            .control{
                position: absolute;
                top: 12px;
                right: 320px;
                z-index: 1000;
                display: flex;
            }
            .tuceng{
                position: absolute;
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                z-index: 1000;
                bottom: 20px;
                right: 0px;
                transition: 0.5s all linear;
                div{
                    margin-top: 10px;
                }
            }
            .turectangle{
                position: absolute;
                z-index: 1000;
                width: 100px;
                top:11px;
                right: 120px;
                transition: 0.5s all linear;
            }
        }
        .search-div {
            position: relative;
            width: 100%;
            height: 40px;
            .el-icon-search {
                font-size: 16px;
                font-weight: 600;
                color: #9b9b9b;
                cursor: pointer;
            }
        }
        .el-input--suffix .el-input__inner {
            border: none;
            font-size: 12px;
        }
        .el-input-group__append .el-input, .el-input-group__prepend .el-input {
            width: 38px;
        }
        .input-with-select .el-input-group__prepend, .input-with-select .el-input-group__append {
            background-color: #fff;
        }
    }

    .list-box {
        box-sizing: border-box;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 240px;
        background: rgba(255, 255, 255, 0.7544);
        text-align: center;
        display: flex;
        flex-direction: column;
        font-size: 16px;
        .el-badge__content {
            border-radius: 8px;
            height: 14px;
            line-height: 14px;
            padding: 0 4px;
        }
        .list-title {
            background: #009688;
            border: 0 solid #009688;
            position: relative;
            height: 56px;
            flex: 0 0 56px;
            line-height: 56px;
            color: #f5f5f5;
            font-size: 18px;
            .list-fresh {
                font-weight: 600;
                position: absolute;
                left: 28px;
                top: 18px;
                cursor: pointer;
            }
            .list-text {
                position: absolute;
                right: 10px;
                color: #fff;
                font-weight: 300;
                font-size: 16px;
                line-height: 56px;
                top: 0px;
                cursor: pointer;
                .el-checkbox__label{
                    color: #fff;
                    padding-left:4px;
                }
                .el-checkbox__input.is-checked + .el-checkbox__label{
                    color: #fff !important;
                }
                .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
                    background-color: #fff !important;
                }
                .el-checkbox__inner::after{
                    border-color: #009688 !important;
                }
            }
            .list-text:hover {
                color: #cacccb;
            }
        }
        .list-content {
            border-top: 1px solid #eeeeee;
            overflow-y: scroll;
            overflow-x: hidden;
            flex: 1;
            .high {
                border: 2px solid #1E9FFF;
            }
            li {
                border: 2px solid transparent;
                transition: .2s ease-in;
                box-sizing: border-box;
                padding: 6px;
                position: relative;
                margin-bottom: 12px;
                background: #FFFFFF;
                box-shadow: 0 0 2px 0 rgba(90, 87, 87, 0.50);
                display: flex;
                height: 134px;
                flex-direction: column;
                text-align: left;
                cursor: pointer;
                overflow: hidden;
                .check-trig {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    z-index: 2;
                    cursor: pointer;
                }
                .field-details_tou {
                    display: flex;
                    margin-bottom: 12px;
                    font-size: 14px;
                    line-height: 21px;
                    .field-details_ddid {
                        color: #FF8D00;
                        flex: 1;
                        padding-left: 5px;
                    }
                }
                .field-details_send {
                    color: #6295ec;
                }
                .field-details_rec {
                    color: #19be6b;
                }
                .tel {
                    color: #4A4A4A;
                }
                p {
                    /*height: 22px;*/
                    line-height: 22px;
                    font-size: 14px;
                    color: #676767;
                    letter-spacing: 0;
                    margin-bottom: 8px;
                    .weight {
                        font-size: 16px;
                    }
                }
            }
        }
    }

    .list-tab {
        box-sizing: border-box;
        /*width: 500px;*/
        /*height: 50px;*/
        display: flex;
        position: absolute;
        top: 10px;
        right: 320px;
        z-index: 100;
        .el-select{
            border: 1px solid #D8DCE6;
        }
    }

</style>
